<template>
  <div style="padding: 20px 40px">
    <div class="toptime dis disAl" style="justify-content: space-between;">
      <div />
      <div class="dis disAl">
        <div class="mar-right10 l-r" @click="up_daytime(0)"><i
          class="el-icon-arrow-left"
          style="color: #6b7cdd"
        /></div>
        <!-- <el-date-picker v-model="daytime" type="date" placeholder="选择日期" /> -->
        <div class="mar-left15 mar-right15 foSi18 xuanze">{{ daytime }}</div>
        <div class="mar-left10 l-r" @click="up_daytime(1)"><i
          class="el-icon-arrow-right"
          style="color: #6b7cdd"
        /></div>
        <div class="mar-left10">
          <el-button type="success" size="small" class="bac6b7" @click="gettime()">返回今天</el-button>
        </div>
      </div>
      <div />
    </div>
    <div class="xian mar-top15 mar-bott20" />
    <div v-if="course_list.length > 0" style="width: 100%" class="dis disAl">
      <div class="mar-right10 l-r" @click.stop="courseSlideClick(0)"><i
        class="el-icon-arrow-left"
        style="color: #6b7cdd"
      />
      </div>
      <div id="courseSlide" style="width: 100%;height: 116px;overflow: hidden;min-width: 1060px;" class="">
        <div id="courseSlide1" style="display: inline-flex;" :style="'margin-left: -'+courseLeft+'px;'">
          <div
            v-for="(item,index) in course_list"
            :key="index"
            class="items1 mar-right20"
            :class="item.coach_id == search_course_id ? 'cur_choice' : ''"
            style="border: 1px solid #ccc;float: left"
            @click="course_change(item.coach_id)"
          >
            <div class="dis disAl wid100 hei60 foSi14" style="background-color: #ededef;padding: 0 10px;">
              <div>
                <img :src="item.cover_img" style="width: 40px;height: 40px">
              </div>
              <div class="mar-left10">{{ item.coach_name }}</div>
            </div>
            <div class="dis disAl disJuB foSi12 mar-top10" style="padding: 0 10px;">
              <div class="yybtn1" @click.stop="yuyue(item)">预约</div>
              <div>预约：{{ item.people_num }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="mar-left10 l-r" @click.stop="courseSlideClick(1)"><i
        class="el-icon-arrow-right"
        style="color: #6b7cdd"
      />
      </div>
    </div>
    <div v-else style="color: #888888;width: 100%;text-align: center;height: 150px;line-height: 150px">
      暂无排课
    </div>
    <div style="width: 95%;margin:0px auto;border: 3px solid #ccc;margin-top: 20px" class="mar-top20" />
    <div v-loading="loading" style="padding: 15px 30px">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
        <div slot="empty" class="m-empty-box">
          <div class="mar" style="width: 168px;height: 180px;">
            <img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
          </div>
          <div class="title">暂无数据</div>
        </div>
        <el-table-column label="ID">
          <template slot-scope="scope">
            <div class="dis disAl">
              <span class="mar-left5 overflowHidden" style="width: 100px;">{{ scope.row.id }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="头像">
          <template slot-scope="scope">
            <div class="dis disAl">
              <img :src="scope.row.headimg" style="width: 30px;height: 30px;">
            </div>
          </template>
        </el-table-column>
        <el-table-column label="昵称">
          <template slot-scope="scope">
            <div class="dis disAl">
              <span class="mar-left5 overflowHidden" style="width: 100px;">{{ scope.row.nickname }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="姓名">
          <template slot-scope="scope">
            <div class="dis disAl">
              <span class="mar-left5 overflowHidden" style="width: 100px;">{{ scope.row.realname }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="手机号">
          <template slot-scope="scope">
            <div class="dis disAl">
              <span class="mar-left5 overflowHidden" style="width: 100px;">{{ scope.row.tel }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="card_name" label="会员卡种类" />
        <el-table-column width="140" prop="card_no" label="卡号" />
        <el-table-column prop="course_name" label="课程名称" />
        <el-table-column prop="reservation_time" label="上课时间" />
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div class="dis disAl">
              <div><el-tag>约</el-tag></div>
              <!-- <div v-if="scope.row.status === 0" style="color: #6b7cdd">已排队</div> -->
              <div v-if="scope.row.status === 1" style="color: #6b7cdd">已预约</div>
              <div v-if="scope.row.status === 2" style="color: #6b7cdd">已签到</div>
              <div v-if="scope.row.status === 3" style="color: #6b7cdd">已取消</div>
              <div v-if="scope.row.status === 4" style="color: #6b7cdd">已完成</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.actions')"
          align="center"
          width="240"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <div class="cuPo dis" style="justify-content: center">
              <div
                v-if="scope.row.status === 1"
                class="cuPo"
                style="align-items: center; margin-right: 10px"
                @click.stop="upQueue(scope.row.id)"
              >
                <i class="el-icon-circle-close" style="color: #6b7cdd; font-size: 18px" />取消预约
              </div>
              <div
                v-if="scope.row.status === 1"
                class="cuPo"
                style="align-items: center; margin-right: 10px"
                @click.stop="getDetailsClick(scope.row.id,2)"
              >
                <i class="el-icon-edit" style="color: #6b7cdd; font-size: 18px" />签到
              </div>
              <div
                v-if="scope.row.status === 2"
                class="cuPo"
                style="align-items: center; margin-right: 10px"
                @click.stop="quxiaoCheck(scope.row.id)"
              >
                <i class="el-icon-circle-close" style="color: #6b7cdd; font-size: 18px" />取消签到
              </div>
              <div
                class="cuPo"
                style="align-items: center; margin-right: 10px"
                @click.stop="getDetailsClick(scope.row.id,1)"
              >
                <i class="el-icon-document" style="color: #6b7cdd; font-size: 18px" />详情
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 预约弹窗 -->
    <div v-if="is_yuyue_show" id="commonBg" class="m-dialog-bg" />
    <div class="m-dialog-box fade-in" style="font-size: 14px">
      <div class="dialog-content">
        <div v-if="is_yuyue_show" class="dialog-content">
          <div class="dialog-content-header">
            <div class="dialog-title">
              <span class="title-type"> 约私教 </span>（
              <span class="mr-15">{{ daytime }}</span>
              <span class="mr-15">{{ week }}</span>
              <span>{{ todayatime === 0?'今天':todayatime+'天后' }}</span>）
              <em class="icon icon-card-tips2 ml-10 order-handle" />
            </div>
            <span class="dialog-close js-dialog_close" @click="is_yuyue_show = false" />
          </div>
          <div class="dialog-content-main">
            <!-- 团课预约 -->
            <div class="m-wkt-order flex-edit-box">
              <div class="wkp-coach-info-box mb-30">
                <div class="wkp-coach-info">
                  <div class="coach-avator">
                    <img loading="lazy" :src="group.cover_img">
                  </div>
                  <p class="coach-name">{{ group.coach_name }}</p>
                </div>
                <div class="wkp-coach-course-info">
                  <div class="field-box">
                    <div class="item clear">
                      <label class="fl label">课程</label>
                      <!-- <select v-model="jiaoKc" id="wkp_course" class="select-140x34 mr-40" name="wkp_course"
												placeholder="请选择课程">
												<el-option v-for="(item,index) in jiaoKcList" :key="index" :label="item.name"
													:value="index" />
											</select> -->
                      <el-select v-model="jiaoKc" style="width: 140px;height: 34px;" @change="kcChange">
                        <el-option
                          v-for="(item,index) in jiaoKcList"
                          :key="index"
                          :label="item.name"
                          :value="index"
                        />
                      </el-select>
                      <span>（课程时长<i class="wkp-course-dur">{{ yuyueTime }}</i>分钟）</span>
                    </div>
                  </div>
                  <div class="field-box">
                    <div class="item clear" style="display: flex">
                      <label class="fl label">开始时间</label>
                      <div class="xiala choice_time cuPo" @click="choice_private_teching_time()">
                        {{ choiceTimesList.length>0?choiceTimesList[choicetimeId].time:'00:00' }}
                        <img src="../../icons/png/xia.png" style="width: 20px">
                      </div>
                      <div v-show="open_private_time" class="wkp-timeline-list">
                        <ul id="wkp_tld" class="wkp-tld hide pad0">
                          <li
                            v-for="(item, index) in choiceTimesList"
                            :key="index"
                            :class="(choicetimeId === index?'sel':'')+(item.is_occupy === 1?'default':'dis')"
                            @click="choicetime_ok(index)"
                          >{{ item.time }}</li>
                        </ul>
                      </div>
                      <span class="wkp-end-time" style="margin-left: 50px;">结束时间：{{ formatdate }}</span>
                      <!-- <input type="hidden" name="wkp_end_time" value="21:30"> -->
                    </div>
                  </div>
                </div>
              </div>
              <div class="field-box">
                <div class="item clear" style="height: 200px;">
                  <label class="fl label">会员信息</label>
                  <div class="dialog-wk-memberinfo-box">
                    <div class="search-box">
                      <el-input
                        v-model="search_npc"
                        placeholder="姓名/手机号/卡号"
                        style="width: 140px;"
                        @input="nameInput"
                      />
                      <div
                        v-if="nameVisible"
                        class="poAbs nameSuo"
                        style="left: 115px;top: 195px;"
                      >
                        <div
                          v-for="(item,index) in nameList"
                          :key="index"
                          class="suosouText foSi14"
                          @click.stop="nameClick(item)"
                        >
                          {{ item.title }}
                        </div>
                      </div>
                    </div>
                    <div class="dialog-wk-memberinfo flex-detail-box">
                      <div class="field-box txt-els">
                        <div class="item-l">
                          <label class="fl label">会员</label>
                          <span
                            class="fr wk_name_text"
                          >{{ namePicture?namePicture.realname:'' }}</span>
                        </div>
                        <div class="item-r">
                          <label class="fl label">开卡场馆</label>
                          <span
                            class="fr wk_venue_title"
                          >{{ namePicture?namePicture.brand_name:'' }}</span>
                        </div>
                      </div>
                      <div class="field-box txt-els">
                        <div class="item-l">
                          <label class="fl label">手机号</label>
                          <span
                            class="fr wk_name_phone"
                          >{{ namePicture?namePicture.tel:'' }}</span>
                        </div>
                        <div class="item-r">
                          <label class="fl label">卡号</label>
                          <span
                            class="fr wk_name_cardno"
                          >{{ namePicture?namePicture.card_number:'' }}</span>
                        </div>
                      </div>
                      <div class="field-box txt-els">
                        <div class="item-l">
                          <label class="fl label">余额</label>
                          <span
                            class="fr wk_name_amt"
                          >{{ namePicture?namePicture.charge_card_balance:'' }}</span>
                        </div>
                        <div class="item-r">
                          <label class="fl label">有效期至</label>
                          <span
                            class="fr wk_name_limit"
                          >{{ namePicture?namePicture.cards_period:'' }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="field-box clear">
                <div class="item-l">
                  <label class="fl label">预约人次</label>
                  <div class="field field-count clear">
                    <el-input-number v-model="people_num" :min="1" :max="10" />
                  </div>
                </div>
                <div class="item-r field-total-price">
                  <label class="fl label">费用</label>
                  <!--              <div class="fr hide" id="J_LPB"><span class="h-course-price">0</span><span class="wk-unit">次</span> 次/人<span class="mx-10">*</span><span class="wk_num">1</span>人 ｜ 共 <span class="wk_sum">0</span> <span class="wk-unit">次</span></div>-->
                </div>
              </div>
              <div class="field-box field-wk-notes-box">
                <div class="item clear">
                  <label class="fl label">备注</label>
                  <el-input v-model="notes" type="textarea" :rows="4" data-msg="请填写0-50字之间" />
                </div>
              </div>
            </div>
            <!-- /团课预约 -->
          </div>
          <div class="posr dialog-content-footer">
            <el-button
              type="primary"
              class="mr-20 btn-autox34 btn-check-wk"
              @click="close_yuyue"
            >保存</el-button>
            <el-button
              type="info"
              class="btn-autox34_disabled js-dialog_close"
              @click.stop="is_yuyue_show = false"
            >取消</el-button>
          </div>
        </div>
      </div>
    </div>
    <div v-if="shuaVisible !== 0" class="zhezhao wh100" />
    <div v-if="shuaVisible !== 0" class="zhezhaoN dis disAl disJuC wh100">
      <el-scrollbar wrap-class="scrollbar-wrapper zhezhaoWH poRel borRad10 bacFFF" style="width: 880px;">
        <div class="wid90 mar">
          <div class="wid100 dis disAl disJuB" style="padding: 30px 0 10px;border-bottom: 1px solid #d9d9d9;">
            <div class="dis disAl">
              <div v-if="shuaVisible === 1" class="foSi20 fowe800 mar-right10">预约记录（私教课）</div>
              <div v-if="shuaVisible === 2" class="foSi20 fowe800 mar-right10">会员签到</div>
            </div>
            <svg-icon
              icon-class="guanbi"
              class="mar0 cuPo"
              style="color: #ACACAC;width: 24px;height: 24px;"
              @click.stop="shuaVisibleClick()"
            />
          </div>
          <div v-if="shuaVisible === 1">
            <div class="" style="padding: 20px 0;">
              <div style="height: 92px;">
                <img :src="details.card_coverimg" style="width: 124px;height: 76px;">
              </div>
              <div class="base-title">会员卡信息</div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>卡号</div>
                  <div>{{ details.card_number }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>卡名称</div>
                  <div>{{ details.card_name }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>持卡人</div>
                  <div>{{ details.member_name }} / {{ details.sex === 1?'男':'女' }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>手机</div>
                  <div>{{ details.member_tel }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>当前卡余额</div>
                  <div>{{ details.card_balance.str }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>扣减后余额</div>
                  <div>{{ details.card_ded_balance }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>开卡场馆</div>
                  <div>{{ details.card_brand }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>有效期至</div>
                  <div>{{ details.card_period }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1 mar-top20">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>课程名称</div>
                  <div>{{ details.class_name }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>预约上课时间</div>
                  <div>{{ details.class_start_time }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>预约人次</div>
                  <div>{{ details.reservation_people }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>教练</div>
                  <div>{{ details.coach_name }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>扣减</div>
                  <div>{{ details.minus }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>上课教室</div>
                  <div>{{ details.class_room }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>储物柜</div>
                  <div>{{ details.locker_id }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1 item-p" style="min-height: 42px;">
                <div style="width: 80px;">备注</div>
                <div>{{ details.notes }}</div>
              </div>
              <div class="item-l dis disAl item-bor1 mar-top20">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>状态</div>
                  <div v-if="details.status === 1">已预约</div>
                  <div v-if="details.status === 2">已签到</div>
                  <div v-if="details.status === 3">已取消</div>
                  <div v-if="details.status === 4">已完成</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>预约时间</div>
                  <div>{{ details.appoin_time }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>预约操作人</div>
                  <div>{{ details.appoin_user }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>签到时间</div>
                  <div>{{ details.sign_in_time }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>签到操作人</div>
                  <div>{{ details.sign_in_user }}</div>
                </div>
              </div>
            </div>
            <div class="wid100 dis disAl disJuC foSi14 coFFF" style="padding: 20px 0 40px">
              <div class="que cuPo" style="background: #616b74;" @click.stop="shuaVisibleClick()">关闭</div>
            </div>
          </div>
          <div v-if="shuaVisible === 2">
            <div class="" style="padding: 20px 0;">
              <div class="dis" style="height: 82px;">
                <img :src="details.headimg" style="width: 70px;height: 70px;">
                <div class="mar-left15">{{ details.member_name }}</div>
                <div class="mar-left10">
                  <svg-icon
                    v-if="details.sex !== 1"
                    icon-class="gril"
                    class="mar0"
                    style="width: 18px;height: 18px;"
                  />
                  <svg-icon v-else icon-class="son" class="mar0" style="width: 18px;height: 18px;" />
                </div>
              </div>
              <div class="base-title">会员信息</div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>电话</div>
                  <div>{{ details.member_tel }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>会籍顾问</div>
                  <div>{{ details.consultant }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>卡号</div>
                  <div>{{ details.card_number }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>卡名称</div>
                  <div>{{ details.card_name }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>有效期至</div>
                  <div>{{ details.card_period }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>余额</div>
                  <div>{{ details.card_balance.str }}</div>
                </div>
              </div>
              <div class="base-title mar-top20">课程信息</div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>课程类型</div>
                  <div>私教课</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>课程名称</div>
                  <div>{{ details.class_name }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>上课时间</div>
                  <div>{{ details.class_start_time }}</div>
                </div>
                <div class="dis disAl disJuB item-w item-p hei42">
                  <div>课程时长</div>
                  <div>{{ details.class_minute }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>教练</div>
                  <div>{{ details.coach_name }}</div>
                </div>
              </div>
              <div class="item-l dis disAl item-bor1 item-p" style="min-height: 42px;">
                <div style="width: 80px;">备注</div>
                <div>{{ details.notes }}</div>
              </div>
              <div class="base-title mar-top20">储物柜信息</div>
              <div class="item-l dis disAl item-bor1">
                <div class="dis disAl disJuB item-w item-bor item-p hei42">
                  <div>储物柜编号</div>
                  <el-input
                    v-model="locker_number"
                    style="width: 140px;"
                    size="small"
                    placeholder="请输入储物柜编号"
                  />
                </div>
              </div>
            </div>
            <div class="wid100 dis disAl disJuC foSi14 coFFF" style="padding: 20px 0 40px">
              <div
                class="mar-right20 que cuPo"
                style="background: #48a9f3;"
                @click.stop="qiandao(details.id)"
              >确认
              </div>
              <div class="que cuPo" style="background: #616b74;" @click.stop="shuaVisibleClick()">取消</div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import {
  mapGetters
} from 'vuex'
import {
  getXuan,
  judgeButton
} from '@/utils/limits.js'
import {
  privateRecord,
  cancelOper,
  getSignIn,
  appointmentDetails,
  appointmentRecord,
  coachCanRese
} from '@/api/dashboard' // Secondary package based on el-pagination
import {
  getSearchCardUser,
  getGroupLessons
} from '@/api/components'
import {
  getcourseAll
} from '@/api/coures'
export default {
  name: 'Privateappointment',
  data() {
    return {
      locker_number: '',
      shuaVisible: 0,
      details: {},
      listQuery: {
        page: 1,
        limit: 0
      },
      search_course_id: 3, // 日课表选中的课程ID
      currentRole: 'adminDashboard',
      timelist: [], // 搜索时间
      daytime: '', // 单日搜索
      todayatime: 0,
      week: '',
      course_list: [],
      table_sort: false, // 打开表格排序
      loading: false,
      // 预约
      tableData: [],
      is_yuyue_show: false,
      search_npc: '',
      notes: '',
      people_num: '',
      choiceTimesList: [
        { id: 0, name: '09:00', pd: true }, { id: 1, name: '09:30', pd: true }, { id: 2, name: '09:45', pd: true },
        { id: 3, name: '09:55', pd: false }, { id: 4, name: '10:30', pd: false }, { id: 5, name: '11:45', pd: true }
      ],
      choicetimeId: 0,
      open_private_time: false,
      nameVisible: false,
      nameList: [],
      namePicture: null,
      courseLeft: 0,
      courseList: [],
      courseIndex: 0,
      courseBiaoshi: false,
      group: {},
      yuyueTime: 0,
      jiaoKcList: [],
      jiaoKc: null,
      formatdate: '',
      formatdate1: ''
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  created() {
    if (!this.roles.includes('admin')) {
      this.currentRole = 'editorDashboard'
    }
    var xuanList = [{
      name: '团课预约记录',
      url: '/dashboard',
      pd: true
    },
    {
      name: '私教预约记录',
      url: '/privateappointment',
      pd: true
    },
    {
      name: '爽约惩罚',
      url: '/punishment',
      pd: true
    },
    {
      name: '储物柜',
      url: '/locker',
      pd: true
    },
    {
      name: '请假管理',
      url: '/leavemanage',
      pd: true
    },
    {
      name: '班课上课记录',
      url: '/classrecord',
      pd: true
    }
    ]
    var xuanList1 = getXuan(xuanList, this.roles)
    this.$store.dispatch('user/changeXuan', {
      key: 'xuanList',
      value: xuanList1
    })
    this.$store.dispatch('user/changeXuan', {
      key: 'xuan',
      value: 1
    })
    this.gettime()
    var check = localStorage.getItem('check')
    if (check) {
      var list = check.split(',')
      this.check = list.map(Number)
    }
  },
  methods: {
    getJudge(name) {
      return judgeButton(name, this.roles)
    },
    qiandao(id) {
      var papem = {
        type: 1,
        idlist: id,
        courseschool_id: this.search_course_id
      }
      getSignIn(papem).then(response => {
        const {
          data
        } = response
        this.$message({
          message: '签到成功',
          type: 'success'
        })
        this.shuaVisibleClick()
        this.course_change(id)
        this.coureschange(1)
      }).catch(error => {
        console.log(error)
      })
    },
    shuaVisibleClick() {
      this.shuaVisible = 0
    },
    upQueue(id) {
      cancelOper({
        'type': 2,
        'id': id
      }).then(response => {
        const {
          data
        } = response
        this.$message({
          message: '取消预约成功',
          type: 'success'
        })
        this.course_change(this.search_course_id)
        this.coureschange(1)
      }).catch(error => {
        console.log(error)
      })
    },
    getDetailsClick(id, type) {
      appointmentDetails({
        id: id
      }).then(response => {
        const {
          data
        } = response
        this.details = data
        this.shuaVisible = type
      }).catch(error => {
        console.log(error)
      })
    },
    quxiaoCheck(id) {
      getSignIn({
        type: 2,
        idlist: id,
        courseschool_id: this.search_course_id
      }).then(response => {
        const {
          data
        } = response
        this.$message({
          message: '取消签到成功',
          type: 'success'
        })
        this.course_change(this.search_course_id)
      }).catch(error => {
        console.log(error)
      })
    },
    courseCreated() {
      var courseSlide = document.getElementById('courseSlide')
      var courseSlide1 = document.getElementById('courseSlide1')
      var width = courseSlide.offsetWidth
      var width1 = courseSlide1.offsetWidth
      var width2 = width1 - width
      var number = Math.ceil(width2 / 212)
      var number1 = Math.ceil(number / 4) + 1
      for (var i = 0; i < number1; i++) {
        this.courseList.push(212 * 4 * i)
      }
    },
    courseSlideClick(index) {
      if (index === 0 && this.courseIndex > 0 && !this.courseBiaoshi) {
        this.courseIndex -= 1
        this.courseTimeout(2)
      } else if (index === 1 && this.courseIndex < this.courseList.length - 1 && !this.courseBiaoshi) {
        this.courseIndex += 1
        this.courseTimeout(1)
      }
    },
    courseTimeout(index) {
      this.courseBiaoshi = true
      var timer = setInterval(() => {
        if (index === 1) {
          this.courseLeft += 212 / 10
          if (this.courseList[this.courseIndex] <= this.courseLeft) {
            this.courseLeft = this.courseList[this.courseIndex]
            this.courseBiaoshi = false
            clearInterval(timer)
          }
        } else {
          this.courseLeft -= 212 / 10
          if (this.courseList[this.courseIndex] >= this.courseLeft) {
            this.courseLeft = this.courseList[this.courseIndex]
            this.courseBiaoshi = false
            clearInterval(timer)
          }
        }
      }, 10)
    },
    getGroupclass() {
      var that = this
      privateRecord({
        'date': this.daytime
      }).then(response => {
        const {
          data
        } = response
        this.course_list = data
        this.courseLeft = 0
        this.courseList = []
        this.courseIndex = 0
        var ass = true
        this.course_list.forEach(item => {
          if (item.class_state === 1 && ass) {
            ass = false
            this.course_change(item.coach_id)
          }
        })
        if (ass && this.course_list.length > 0) {
          this.course_change(this.course_list[0].coach_id)
          setTimeout(() => {
            that.courseCreated()
          }, 100)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    nameClick(item) {
      this.namePicture = item
      this.search_npc = item.realname
      this.nameVisible = false
    },
    nameInput(e) {
      var date = {
        'keyword': e
      }
      getSearchCardUser(date).then(response => {
        const {
          data
        } = response
        console.log(data)
        this.nameList = data
        this.nameVisible = true
      }).catch(error => {
        console.log(error)
        this.listLoading = false
      })
    },
    choice_private_teching_time() {
      console.log('设置打开了')
      if (this.choiceTimesList.length > 0) {
        this.open_private_time = !this.open_private_time
      } else {
        this.$message.error('教练未配置时间')
      }
    },
    choicetime_ok(item) {
      this.choicetimeId = item
      this.timeChange()
      this.open_private_time = !this.open_private_time
    },
    yuyue(item) {
      console.log(item)
      this.group = item
      this.open_private_time = false
      this.coachCanRese()
    },
    timeChange() {
      var time = this.choiceTimesList.length > 0 ? this.choiceTimesList[this.choicetimeId].time_str : 0
      var date = time !== 0 ? new Date(time * 1000) : new Date(new Date(this.daytime).setHours(0, 0, 0, 0)) // 1. js获取当前时间
      console.log(date)
      var min = date.getMinutes() // 2. 获取当前分钟
      date.setMinutes(min + this.yuyueTime) // 3. 设置当前时间+10分钟：把当前分钟数+10后的值重新设置为date对象的分钟数
      var y = date.getFullYear()
      var m = (date.getMonth() + 1) < 10 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
      var d = date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate()
      var h = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours()
      var f = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()
      this.formatdate = h + ':' + f
      this.formatdate1 = y + '-' + m + '-' + d + ' ' + h + ':' + f + ':00'
    },
    coachCanRese() {
      coachCanRese({
        'rese_time': this.daytime,
        'coach_id': this.group.coach_id
      }).then(response => {
        const {
          data
        } = response
        console.log(data)
        this.choiceTimesList = data
        this.choicetimeId = 0
        this.getcourseList()
      }).catch(error => {
        console.log(error)
      })
    },
    getcourseList() {
      getcourseAll({
        'keyword': '',
        'coach_id': this.group.coach_id,
        'type': 3 // 1团课2精品课3私教课4班课
      }).then(response => {
        const {
          data
        } = response
        console.log(data)
        this.jiaoKcList = data
        if (data.length > 0) {
          this.jiaoKc = 0
          this.yuyueTime = this.jiaoKcList[0].long_time
          this.timeChange()
        } else {
          this.jiaoKc = null
          this.yuyueTime = 0
        }
        this.is_yuyue_show = true
      }).catch(error => {
        this.is_yuyue_show = true
        console.log(error)
      })
    },
    kcChange(e) {
      console.log(this.jiaoKcList[this.jiaoKc])
      this.yuyueTime = this.jiaoKcList[this.jiaoKc].long_time
      this.timeChange()
    },
    getCurrentDate1() {
      var time = this.choiceTimesList.length > 0 ? this.choiceTimesList[this.choicetimeId].time_str : 0
      var date = time !== 0 ? new Date(time * 1000) : new Date(new Date(this.daytime).setHours(0, 0, 0, 0)) // 1. js获取当前时间
      var y = date.getFullYear()
      var m = (date.getMonth() + 1) < 10 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
      var d = date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate()
      var h = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours()
      var f = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()
      return {
        'src': y + '-' + m + '-' + d + ' ' + h + ':' + f + ':00',
        'time': date.valueOf()
      }
    },
    close_yuyue() {
      if (!this.namePicture) {
        return this.$message.error('请选择会员卡')
      }
      if (this.jiaoKc === null || this.jiaoKc === '') {
        return this.$message({
          message: '请先选择课程',
          type: 'warning'
        })
      }
      var class_start_time = this.getCurrentDate1()
      var date = new Date().valueOf()
      if (date > class_start_time.time) {
        return this.$message({
          message: '选择时间不得小于当前时间',
          type: 'warning'
        })
      }
      var date = {
        'type': 3,
        'class_id': this.jiaoKcList[this.jiaoKc].id,
        'class_name': this.jiaoKcList[this.jiaoKc].name,
        'card_id': this.namePicture.id,
        'card_no': this.namePicture.card_number,
        'reservation_people': this.people_num,
        'teacher_id': this.group.id,
        'teacher_name': this.group.coach_name,
        'minus': this.people_num,
        'lockers_id': '',
        'notes': this.notes,
        'class_start_time': class_start_time.src,
        'class_end_time': this.formatdate1
      }
      getGroupLessons(date).then(response => {
        const {
          data
        } = response
        this.is_yuyue_show = false
        // this.getGroupclass()
        this.course_change(this.search_course_id)
      }).catch(error => {
        console.log(error)
      })
    },
    schedule_change(type) {
      this.schedule_type = type
    },
    course_change(id) {
      this.search_course_id = id
      this.loading = true
      appointmentRecord({
        'teacher_id': id,
        'type': 3,
        'times': this.daytime
      }).then(response => {
        const {
          data
        } = response
        console.log(data.data)
        this.tableData = data.data
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    gettime() {
      const now = new Date()
      const year = now.getFullYear()
      const month = now.getMonth() + 1
      const day = now.getDate()
      this.todayatime = 0
      this.daytime = year + '-' + month + '-' + day
      var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      this.week = weeks[now.getDay()]
      this.getGroupclass()
    },
    up_daytime(type) {
      const now = new Date()
      now.setDate(now.getDate() + (type === 1 ? this.todayatime + 1 : this.todayatime - 1)) // 获取AddDayCount天后的日期
      const year = now.getFullYear()
      var month = (now.getMonth() + 1) < 10 ? '0' + (now.getMonth() + 1) : (now.getMonth() +
					1) // 获取当前月份的日期，不足10补0
      var day = now.getDate() < 10 ? '0' + now.getDate() : now.getDate() // 获取当前几号，不足10补0
      type === 1 ? this.todayatime++ : this.todayatime--
      this.daytime = year + '-' + month + '-' + day
      var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      this.week = weeks[now.getDay()]
      this.getGroupclass()
    }
  }
}
</script>
<style>
	.l-r {
		background-color: #ededed;
		padding: 7px;
		border-radius: 50%;
		cursor: pointer;
	}

	.xian {
		border-bottom: 1px solid #ededed;
	}

	.items1 {
		width: 192px;
		height: 116px;
	}

	.yybtn1 {
		width: 60px;
		height: 34px;
		text-align: center;
		margin-left: -10px;
		line-height: 34px;
		color: #fff;
		background-color: #6b7cdd;
		cursor: pointer;
		border-radius: 0px 5px 5px 0px;
	}

	.person_icon {
		width: 27px;
		height: 47px;
		margin-right: 13px;
		border-radius: 50%;
		padding: 10px 0;
	}

	.cur_choice {
		border: 1px solid #6b7cdd !important;
	}

	.change-skin span {
		float: left;
		width: 36px;
		height: 29px;
	}

	/**
  预约弹窗
   */
	.m-dialog-box {
		position: absolute;
		width: 962px;
		left: 50%;
		top: 10%;
		margin-left: -480px;
		z-index: 1200;
		opacity: 0;
		transition: all .2s ease-in-out;
	}

	.m-dialog-bg {
		position: fixed;
		z-index: 1000;
		background: rgba(0, 0, 0, .4);
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.dialog-content {
		background: #ffffff;
		border-radius: 10px;
	}

	.fade-in {
		opacity: 1;
	}

	.dialog-content .dialog-content-header {
		position: relative;
		padding: 30px 0 10px;
		font-size: 20px;
		line-height: 20px;
		border-bottom: 1px solid #d9d9d9;
		margin: 0 60px;
		font-weight: 700;
	}

	.dialog-content .dialog-content-main {
		padding: 20px 60px;
	}

	.dialog-content .dialog-content-footer {
		padding: 20px 30px 40px;
		text-align: center;
	}

	.dialog-content .dialog-content-header .dialog-close {
		position: absolute;
		right: 0;
		top: 28px;
		width: 24px;
		height: 24px;
		background: url(../../../public/img/close.svg) no-repeat 0 0;
		background-size: 24px 24px;
		cursor: pointer;
	}

	.mr-15 {
		margin-right: 15px;
	}

	.flex-edit-box {
		position: relative;
	}

	.flex-edit-box .field-box {
		margin-bottom: 8px;
		background: #f2f2f2;
		min-height: 42px;
		line-height: 42px;
	}

	.flex-edit-box .field-box:last-child {
		margin-bottom: 0;
	}

	.m-wkt-order .field-wk-notes-box {
		position: relative;
	}

	.flex-edit-box .field-box {
		margin-bottom: 8px;
		background: #f2f2f2;
		min-height: 42px;
		line-height: 32px;
	}

	.flex-edit-box .field-box .item {
		padding: 5px 15px;
	}

	.clear {
		zoom: 1;
	}

	.m-wkt-order .field-box .label {
		width: 100px;
	}

	.fl {
		float: left;
	}

	.mr-25 {
		margin-right: 25px;
	}

	.dialog-wk-memberinfo-box {
		float: left;
		width: 710px;
	}

	.m-wkt-order .field-box .dialog-wk-memberinfo {
		width: 710px;
		border: 1px dashed #d9d9d9;
		margin-top: 10px;
		background: #f2f2f2;
		overflow: hidden;
	}

	.flex-detail-box {
		position: relative;
	}

	.dialog-wk-memberinfo .field-box {
		margin-bottom: 0;
	}

	.flex-edit-box .field-box {
		margin-bottom: 8px;
		background: #f2f2f2;
		min-height: 42px;
		line-height: 32px;
	}

	.flex-detail-box .field-box {
		margin-bottom: 2px;
		background: #f2f2f2;
		min-height: 42px;
		line-height: 32px;
	}

	.txt-els {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.flex-edit-box .field-box .item-l {
		border-right: 2px solid #ffffff;
	}

	.flex-edit-box .field-box .item-l,
	.flex-edit-box .field-box .item-r {
		float: left;
		width: 50%;
		padding: 5px 15px;
		box-sizing: border-box;
	}

	.m-wkt-order .field-box .label {
		width: 100px;
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	.m-wkt-order .field-box .field-count {
		position: relative;
		float: right;
		height: 32px;
		padding-right: 22px;
	}

	.m-wkt-order .field-box .field .wk-add {
		position: absolute;
		right: 0;
		top: 0;
		width: 25px;
		height: 30px;
		border: 1px solid #d9d9d9;
		background: #ffffff;
		cursor: pointer;
	}

	.m-wkt-order .field-box .field .wk-minus {
		position: absolute;
		left: 0;
		top: 0;
		width: 25px;
		height: 30px;
		border: 1px solid #d9d9d9;
		background: #ffffff;
		cursor: pointer;
	}

	.m-wkt-order .field-box .field .count {
		position: absolute;
		height: 30px;
		line-height: 30px;
		width: 48px;
		left: 26px;
		text-align: center;
		border: 1px solid #d9d9d9;
	}

	.wkp-coach-info-box {
		height: 118px;
		position: relative;
	}

	.mb-30 {
		margin-bottom: 30px;
	}

	.wkp-coach-info-box .wkp-coach-info {
		position: absolute;
		width: 100px;
		top: 0;
		left: 0;
	}

	.wkp-coach-info-box .wkp-coach-course-info {
		position: relative;
		float: right;
		width: 723px;
		height: 126px;
		background: #f2f2f2;
		border: 1px dashed #f2f2f2;
	}

	.wkp-coach-info-box .wkp-coach-info .coach-avator {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		overflow: hidden;
	}

	.wkp-coach-info-box .wkp-coach-info .coach-name {
		margin-top: 10px;
		text-align: center;
	}

	.flex-edit-box .field-box {
		margin-bottom: 8px;
		background: #f2f2f2;
		min-height: 42px;
		line-height: 32px;
	}

	.flex-edit-box .field-box .item {
		padding: 5px 15px;
	}

	.m-wkt-order .field-box .label {
		width: 100px;
	}

	.mr-40 {
		margin-right: 40px;
	}

	.select-140x34 {
		width: 140px;
		height: 34px;
		border: 1px solid #d9d9d9;
		display: inline-block;
		padding: 0 8px;
		border-radius: 4px;
	}

	.wkp-coach-info-box .wkp-coach-course-info .wkp-course-dur {
		font-style: normal;
	}

	.wkp-coach-course-info .wkp-timeline-list .wkp-tld {
		position: absolute;
		max-width: 751px;
		left: 0px;
		top: 83px;
		z-index: 10;
		overflow: hidden;
		background: #ddd;
		border-top: 1px solid #d9d9d9;
		border-left: 1px solid #d9d9d9;
		margin-left: -110px;
	}

	.wkp-coach-course-info .wkp-timeline-list .wkp-tld .dis {
		text-align: center;
		cursor: default;
	}

	.wkp-coach-course-info .wkp-timeline-list .wkp-tld li {
		border-right: 1px solid #d9d9d9;
		border-bottom: 1px solid #d9d9d9;
		float: left;
		width: 150px;
		height: 42px;
		line-height: 42px;
		text-align: center;
		display: block;
		cursor: pointer;
	}

	.wkp-coach-course-info .wkp-timeline-list .wkp-tld .sel {
		background: #6b7cdd;
		color: #ffffff;
	}

	.choice_time {
		background: #fff;
		width: 140px;
		text-align: right;
		padding: 0px 10px;
		border-radius: 5px;
		border: 1px solid #ccc;
		display: flex;
		justify-content: right;
		align-items: center;
	}

	.default {
		background: #fff;
	}

	.xuanze {
		-moz-user-select: none;
		/*火狐*/
		-webkit-user-select: none;
		/*webkit浏览器*/
		-ms-user-select: none;
		/*IE10*/
		-khtml-user-select: none;
		/*早期浏览器*/
		user-select: none;
	}
	.nameSuo {
		min-width: 138px;
		z-index: 15;
		background: #fff;
		border: 1px solid #d9d9d9;
		top: 35px;
	}

	 {
		height: 32px;
		line-height: 32px;
		padding: 0 10px;
		border-bottom: 1px solid #d9d9d9;
		cursor: pointer;
		white-space: nowrap;
	}
</style>
